<template>
  <el-divider content-position="left">就诊人信息</el-divider>
  <el-form style="width: 80%;margin: 10px auto"
           :model="userParam"
           :rules="userRules"
           ref="ruleUserRef">
    <el-form-item label="用户姓名" prop="name" label-width="80px">
      <el-input placeholder="请输入用户姓名" v-model="userParam.name"></el-input>
    </el-form-item>
    <el-form-item label="证件类型" prop="certificatesType"  label-width="80px">
      <el-select placeholder="请选择" v-model="userParam.certificatesType">
        <el-option label="身份证" value="10"></el-option>
        <el-option label="户口本" value="20"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="证件号码"  label-width="80px" prop="certificatesNo">
      <el-input placeholder="请输入证件号码" v-model="userParam.certificatesNo"></el-input>
    </el-form-item>
    <el-form-item label="用户性别"  label-width="80px" prop="sex">
      <el-radio-group v-model="userParam.sex">
        <el-radio label="男" :value="1"></el-radio>
        <el-radio label="女" :value="0" ></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="出生日期"  label-width="80px" prop="birthdate">
      <el-date-picker type="date" placeholder="请选择日期" v-model="userParam.birthdate" value-format="YYYY-MM-DD"/>
    </el-form-item>
    <el-form-item label="手机号码"  label-width="80px" prop="phone">
      <el-input  placeholder="请输入手机号码"  v-model="userParam.phone"/>
    </el-form-item>
  </el-form>
  <el-divider content-position="left">建档信息</el-divider>
  <el-form style="width: 80%;margin: 10px auto">
    <el-form-item label="婚姻状况"   label-width="80px" prop="isMarry">
      <el-radio-group v-model="userParam.isMarry">
        <el-radio label="已婚" :value="1" ></el-radio>
        <el-radio label="未婚" :value="0" ></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="自费/医保"  label-width="80px" prop="isInsure">
      <el-radio-group v-model="userParam.isInsure">
        <el-radio label="自费" :value="1"></el-radio>
        <el-radio label="医保" :value="0"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="当前住址"  label-width="80px">
      <el-select clearable placeholder="请选择">
        <el-option label="昌平区" value="1" />
        <el-option label="朝阳区" value="2" />
        <el-option label="房山区" value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="详细地址"  label-width="80px" prop="address">
      <el-input placeholder="请输入详细地址"   v-model="userParam.address"/>
    </el-form-item>
  </el-form>
  <el-divider content-position="left">联系人信息(选填)</el-divider>
  <el-form style="width: 80%;margin: 10px auto">
    <el-form-item label="用户名">
      <el-input placeholder="请输入用户姓名" v-model="userParam.contactsName"></el-input>
    </el-form-item>
    <el-form-item label="证件类型">
      <el-select placeholder="请选择" v-model="userParam.contactsCertificatesType">
        <el-radio-group v-model="userParam.contactsCertificatesType">
          <el-option label="身份证" value="10"></el-option>
          <el-option label="户口本" value="20"></el-option>
        </el-radio-group>
      </el-select>
    </el-form-item>
    <el-form-item label="证件号码">
      <el-input placeholder="请输入证件号码" v-model="userParam.contactsCertificatesNo"></el-input>
    </el-form-item>
    <el-form-item label="手机号码">
      <el-input  placeholder="请输入手机号码"  v-model="userParam.contactsPhone"/>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="submitUser">提交</el-button>
      <el-button type="primary">重写</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">

import {AddOrUpdateUser, UserData} from "@/api/hospital/type.ts";
import {ref} from "vue";
import {ElMessage, FormRules} from "element-plus";
import {reqSaveOrUpdateUser} from "@/api/hospital";

let {userParam} = defineProps<{
  userParam: AddOrUpdateUser,
}>()
const $emit = defineEmits(['refreshPatient'])
const ruleUserRef = ref()
const userRules = ref<FormRules<UserData>>({
  name: [
    { required: true, message: '请输入用户姓名', trigger: 'blur' },
    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
  ],
  certificatesType: [
    { required: true, message: '请选择证件类型', trigger: 'change' }
  ],
  certificatesNo: [
    { required: true, message: '请输入证件号码', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  birthdate: [
    { required: true, message: '请选择出生日期', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ]
})
// 提交就诊人信息
const submitUser = ()=>{
  ruleUserRef.value.validate(async (valid:boolean) =>{
    if(valid){
      const {message} = await reqSaveOrUpdateUser(userParam)
      ElMessage.success(message)
      $emit('refreshPatient')
    }else{
      return false;
    }
  })
}
</script>

<style scoped lang="scss">

</style>
